<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <!-- <el-button class="btnOut" @click="handleOutWeb" type="text">操作说明</el-button> -->
        <div class="rightEdit">
          <i title="最小化" class="el-icon-minus" @click="minimizeWin"></i>
          <i :title="title" :class="changeClass" @click="maximizeWin"></i>
          <i title="关闭" class="el-icon-close" @click="closeWin"></i>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { remote } from "electron";
export default {
  name: "Navbar",
  data() {
    return {
      changeClass: "el-icon-full-screen",
      title: "全屏"
    };
  },
  methods: {
    minimizeWin() {
      remote.getCurrentWindow().minimize();
    },
    maximizeWin() {
      // 如果已处于最大化则恢复
      if (remote.getCurrentWindow().isMaximized()) {
        remote.getCurrentWindow().restore();
        this.changeClass = "el-icon-full-screen";
        this.title = "全屏";
      } else {
        remote.getCurrentWindow().maximize();
        this.changeClass = "el-icon-copy-document";
        this.title = "向下还原";
      }
    },
    closeWin() {
      remote.getCurrentWindow().close();
    }
    // handleOutWeb() {
    //   shell.openExternal(
    //     "https://gitee.com/ruochengflag/electron-vue-rc/tree/master/"
    //   );
    //   // e.preventDefault();
    //   // remote.openExternal(  "https://gitee.com/ruochengflag/electron-vue-rc/tree/master/");
    //   //   window.location.href =
    //   //     "https://gitee.com/ruochengflag/electron-vue-rc/tree/master/";
    // }
  }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bg-purple-dark {
  background: #e5e5e5;
  -webkit-app-region: drag;
  -webkit-user-select: none;
}
.grid-content {
  min-height: 50px;
}
.rightEdit {
  float: right;
  line-height: 50px;
  margin-right: 10px;
  font-size: 16px;

  -webkit-app-region: no-drag;
  i {
    color: #000;
    -webkit-app-region: no-drag;
  }
  i:hover {
    color: #fff;
  }
}
.btnOut {
  -webkit-app-region: no-drag;
}
/deep/.el-button--text {
  color: #fff;
}
</style>